<template>
	<div class="theme">
		<div style="padding: 10px;">
			<span style="font-size: 20px;">Hi</span>
			<span style="font-size: 16px;" v-text="user.nickName ? user.nickName : ''">天空之城</span>
			<span style="float: right;">
				<van-image width="26" height="18" :src="img" v-if="lottery == 0" @click="$toast('暂时没有可领取的红包~')"/>
				<div v-if="lottery != 0">
					<van-image width="26" height="18" :src="img" @click="openMoney" />
					<div class="circle3" style="position: absolute;top: 5px;right: 6px;">
						<span class="font" v-text="lottery">0</span>
		</div>
	</div>
	</span>
	</div>
	<div class="overlay nav-btm headTop">
		<div class="overlay-content scrolling">
			<div style="padding: 10px;">
				<div style="background-color: #f19b77;border-radius: 5px;padding-bottom: 5px;">
					<div style="padding: 20px;color: #FFFFFF;font-size: 13px;">
						可用余额(USDT)
						<span style="float: right;">
								<van-image width="16" height="10" :src="img2" @click="eye" v-if="showEye == false"/>
								<van-image width="14" height="8" :src="img3" @click="eye" v-if="showEye == true"/>
							</span>
					</div>
					<div align="center" style="color: #FFFFFF;font-size: 30px;font-weight: 600;" v-text="money">
						3000.00
					</div>
					<div style="padding: 20px;color: #FFFFFF;font-size: 13px;">
						<span style="float: right;">
								<div class="circle"></div>
								<div class="circle2"></div>
							</span>
					</div>
				</div>
				<van-divider :style="{ color: '#1989fa', borderColor: '#43add5', padding: '0px' }" />
				<van-row type="flex" justify="space-between">
					<van-col span="11" @click="$router.push({name:'IndependentPool'})">
						<img src="../assets/images/p1.png" style="width: 100%;height: 100%;" />
					</van-col>
					<van-col span="11" @click="$router.push({name:'SharePool'})">
						<img src="../assets/images/p2.png" style="width: 100%;height: 100%;float: right;" />
					</van-col>
				</van-row>
				<van-divider :style="{ color: '#1989fa', borderColor: '#43add5', padding: '0px' }" />
				<img :src="img4" style="width: 100%;height: auto;margin-top: -5px;background-size: 100% 100%" />
			</div>
		</div>
	</div>
	<van-popup v-model="show" class="hongbao">
		<div style="width: 270px;height: 350px" :style="{backgroundImage:'url(' + img5 + ')',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'}">
			<div align="center" style="color: #FFFFFF;padding-top: 200px;font-size: 20px;padding-left: 10px;">
				您有一个红包
				<div style="padding-top: 40px;">
					<van-button type="default" color="#fdc113" style="height: 36px;line-height: 34px;width: 80%;border-radius: 20px;" @click="openHB">打开红包</van-button>
				</div>
			</div>
		</div>
	</van-popup>
	<van-popup v-model="show2" class="hongbao" :close-on-click-overlay="false">
		<div style="width: 270px;height: 390px" :style="{backgroundImage:'url(' + img5 + ')',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'}">
			<div align="center" style="color: #FFFFFF;padding-top: 200px;font-size: 20px;padding-left: 10px;">
				{{ lottery2 }} USDT
				<div style="padding-top: 65px;">
					<van-button type="default" color="#fdc113" style="height: 36px;line-height: 34px;width: 80%;border-radius: 20px;" @click="getHB">收下</van-button>
				</div>
			</div>
		</div>
	</van-popup>
	</div>
</template>

<script>
	let _this;
	import { base, home } from './../utils/api';
	export default {
		name: 'Home',
		components: {},
		props: {},
		data() {
			return {
				show: false,
				show2: false,
				img: require('./../assets/images/b.png'),
				img2: require('./../assets/images/eye.png'),
				img3: require('./../assets/images/eye2.png'),
				img4: require('./../assets/images/money.gif'),
				img5: require('./../assets/images/hongbao.png'),
				user: [],
				showEye: false,
				money: 0,
				coin: [],
				lottery: [],
				lottery2: []
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			getUser() {
				base.getUser_info().then(res => {
					this.user = res.data;
				})
			},
			getCoin_accounts() {
				base.getMyInfo().then(res => {
					this.coin = res.data;
					this.money = parseFloat(this.coin.availableNum).toFixed(5).slice(0, -1);
				})
			},
			eye() {
				if(this.showEye == false) {
					this.showEye = true;
					this.money = '****';
				} else if(this.showEye == true) {
					this.showEye = false;
					this.getCoin_accounts();
				}
			},
			openMoney() { // 打开红包
				this.img5 = require('./../assets/images/hongbao.png');
				this.show = true;
			},
			openHB() { // 拆开红包
				home.getLottery2().then(res => {
					if(res.code == 200) { // 正常拆开红包
						this.lottery2 = res.data;
						this.img5 = require('./../assets/images/hongbao2.png'); // 替换图片
						this.show2 = true; // 打开收下页面
					} else {
						this.show = false; // 拆包失败
						this.$toast(res.msg);
					}
				})
			},
			getHB() { // 收下红包
				this.show = false;
				this.show2 = false;
			},
			getLottery() { // 我的幸运红包
				home.getLottery().then(res => {
					this.lottery = res.data;
				})
			},
			initList() {
				this.getLottery();
				this.myInterval = window.setInterval(() => {
					setTimeout(() => {
						this.getLottery() //调用接口的方法
					}, 1);
				}, 3000);
			}
		},
		created() {},
		mounted() {
			localStorage.nav = 1;
			this.getUser();
			this.getCoin_accounts();
			this.initList();
		},
		destroyed() {
			clearInterval(this.myInterval);
		},
		filters: {

		}
	};
</script>

<style lang="less" scoped>
	/deep/ .van-nav-bar {
		background-color: #43add5;
	}
	
	/deep/ .van-nav-bar .van-icon {
		color: white;
	}
	
	/deep/ .van-nav-bar__title {
		color: white;
	}
	
	/deep/ .van-nav-bar__arrow {
		font-size: 18px;
	}
	
	/deep/ .van-image__error,
	.van-image__img,
	.van-image__loading {
		border-radius: 5px;
	}
	
	.title {
		letter-spacing: 0.5px;
	}
	
	.time {
		padding-top: 45px;
		font-size: 12px;
		color: #7D7E80;
	}
	
	.van-pull-refresh {
		overflow: visible!important;
	}
	
	.circle {
		width: 12px;
		height: 12px;
		background: #FFFFFF;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px;
	}
	
	.circle2 {
		width: 12px;
		height: 12px;
		background: #FFFFFF;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px;
		opacity: 0.5;
		margin-left: 8px;
		margin-top: -12px;
	}
	
	.circle3 {
		width: 10px;
		height: 10px;
		background: #EE0A24;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px;
	}
	
	.hongbao.van-popup {
		background-color: transparent;
	}
	
	.font {
		color: white;
		display: block;
		font-size: 10px;
		-webkit-transform: scale(0.8);
		margin-top: -2px;
		margin-left: 1px;
	}
</style>